import React from 'react'
import {View,Text,TouchableOpacity,Button,StyleSheet,Image} from 'react-native'
import { useInstall } from './context'
import AsyncStorage from '@react-native-async-storage/async-storage';
import Swiper from 'react-native-swiper';

const Btn = ({style,font,children,...rest})=>{
    return (
      <TouchableOpacity
        {...rest}
        style={
          [style,
            {justifyContent:'center',alignItems:'center'}
          ]
        }
      >
        <Text style={font}>{children}</Text>
      </TouchableOpacity>
    )
  }

const Slide = () => {
    const {setIsInstall} = useInstall()
    return (
        <View style={{flex: 1}}>
            <Swiper
                showsButtons={false}
                loop={true}
                autoplay={false}
                onIndexChanged={(index) => { }}
                // showsPagination={true}
                dotColor='#ccc'
                activeDotColor='#f00'
                paginationStyle={{bottom: p2d(180)}}
                dotStyle={{marginLeft:p2d(30),marginRight:p2d(30)}}
                activeDotStyle={ {marginLeft:p2d(30),marginRight:p2d(30)} }
            // nextButton={<Text style={{}}> &gt; </Text>}
            // prevButton={<Text style={{}}> &lt; </Text>}
            >
                <View style={styles.slide}>
                    <Image 
                        style={styles.img}
                        source={require('./assets/start1.png')}
                    />
                    <Btn 
                        style={{
                            width: p2d(320),
                            height: p2d(70),
                            borderRadius: p2d(35),
                            position: 'absolute',
                            bottom: p2d(75),
                            backgroundColor:'red',
                            alignSelf: 'center'
                        }}
                        onPress={()=>{
                            setIsInstall(true);
                            AsyncStorage.setItem('install','true')
                        }}
                    >
                        立即体验
                    </Btn>
                </View>
                <View style={styles.slide}>
                    <Image 
                        style={styles.img}
                        source={require('./assets/start1.png')}
                    />
                </View>
                <View style={styles.slide}>
                    <Image 
                        style={styles.img}
                        source={require('./assets/start1.png')}
                    />

                </View>
            </Swiper>
        </View>
  )
}

const styles = StyleSheet.create({
    slide:{
        flex: 1
    },
    img:{
        width: '100%',
        height: '100%'
    }
})

export default Slide;

{/* <Button 
                title='立即体验'
                onPress={()=>{
                    setIsInstall(true);
                    AsyncStorage.setItem('install','true')
                }}
            /> */}